<template>

    <div class="box">

        <el-container style="height: 100vh; border: 1px solid #eee">
            <el-header
                style="height:10vh; width: 100%; text-align: right; font-size: 12px;background-color:#00162A ;display: flex;align-items: center; justify-content: space-between;color: #fff;font-size: 16px;">
                <img src="../assets/logo_new.png" alt="" style="width: 300px;">
                <div style="display: flex; align-items: center;">
                    <el-avatar icon="el-icon-user-solid"></el-avatar>

                    <span style=" margin: 0 10px;">{{ "当前部门:"+curname.relname }}</span>
                    <div @click="quitLogin" class="quit" style="cursor: pointer;display: flex; align-items: center;">退出
                        <i class="el-icon-caret-right" style="font-size: 25px;"></i></div>
                </div>
            </el-header>

            <el-container style="height: 80vh">
            <router-view></router-view>
<!--              <Form></Form>-->
<!--                <Main></Main>-->

            </el-container>
        </el-container>
    </div>

</template>

<script>


export default {
    name: 'Index',
    data() {
        return {
            activeMenu:'/Main',
            coloseBtn:"<",
            isCollapse:false,
            menuw:"200px",
            studata:[],
            pageNum:1,
            pageSize:5,
            reltotal:0,
            total:0,
            reportNum:0,
            notReportNum:0,
            reportRate:'',
            options:[],
            selectOpt:"全部",
            searchName:"",
            searchIdcar:"",
            curname:JSON.parse(localStorage.getItem('CurUser'))
        
        }
    },
    methods: {
        handlecolose(){
            this.isCollapse=!this.isCollapse;
            if(this.isCollapse==false){
                this.coloseBtn="<"
                this.menuw="200px"
            }else{
                this.menuw="64px"
                 this.coloseBtn=">"
            }
        },
        handleSizeChange(val) {
            this.pageSize = val
            this.onLoad()
        },
        handleCurrentChange(val) {
            this.pageNum = val
            this.onLoad()
        },
        queryStuData(){
            this.onLoad();
        },
        quitLogin(){
            localStorage.removeItem('CurUser')
            this.$router.replace( '/')
        }
    },
    components: {
      //  Main,
      // Form
    },
    beforeMount(){
      this.onLoad()
    },
    created(){
        const route = this.$route;
        this.activeMenu = route.path
      console.log(route)
    }
}
</script>

<style scoped>

.el-menu-item.is-active {
  background-color: #178EFC !important; /* 修改为你想要的颜色 */
}
.el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
}

.el-aside {
    color: #333;
}

.headshow {
    height: 10vh;
    width: 100%;
    background-color: aquamarine;
    size: 40px;
}
.colse-btn{
    z-index: 100;
    position: absolute;
    width: 20px;
    height: 150px;
    background-color: #C1C9CF;
    right: 0;
    top: 50%;
    border-radius: 30%;
    text-align: right;
    font-size: 20px;
    font-weight: 900;
    color: #173577;
    line-height: 150px;
    transform: translateX(60%);
    opacity: 0.4;
    cursor: pointer;
    clip-path: inset(0 0 0 40%);
    
}
.colse-btn:hover{
    opacity: 1;
}
.pagelist{
    width: 100%;
    height: 10%;
    display: flex;
    justify-content: center;
}
.show-data{
    width: 100%;
    height: 10%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* background-color: gray */
}
.quit:hover{
    color: red;
}
</style>
